<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="sort1">Sort to 3,2,1</p>
        <p @click="sort2">Sort to 1,2,3</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "SetLayerIndex.component",
    components: {Maptalks},
    setup() {

        let rect1 = ref(null), rect2 = ref(null), rect3 = ref(null)

        // sort to 3,2,1
        const sort1 = () => {
            rect3.value.bringToFront();
            rect1.value.bringToBack();
        }

        //sort to 1,2,3
        const sort2 = () => {
            rect1.value.setZIndex(3);
            rect2.value.setZIndex(2);
            rect3.value.setZIndex(1);
        }

        let mapOnLoadCB = (map) => {
            map.setZoom(14)

            rect3.value = new maptalks.Rectangle(map.getCenter().sub(0.025, 0.0035), 3000, 1000, {
                "symbol": [
                    {
                        "lineColor": "#34495e",
                        "lineWidth": 3,
                        "polygonFill": "#1bbc9b",
                        "polygonOpacity": 1
                    },
                    {
                        "textName": "3",
                        "textWeight": "bold",
                        "textSize": 30,
                        "textFill": "#fff"
                    }
                ]
            });

            rect2.value = rect3.value.copy().translate([0.006, 0.006]).updateSymbol([{"polygonFill": "rgb(216,115,149)"}, {"textName": "2"}]);

            rect1.value = rect2.value.copy().translate([0.006, 0.006]).updateSymbol([{"polygonFill": "rgb(135,196,240)"}, {"textName": "1"}]);

            new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addGeometry(rect3.value, rect2.value, rect1.value).addTo(map);
        };

        return {
            mapOnLoadCB,
            sort1, sort2
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
